<template>
	<div style="height: 100%">
		<z-paging
			ref="$paging"
			:fixed="false"
			:refresher-enabled="isPull"
			:defaultPageSize="pageSize"
			v-model="list.data"
			@query="list.up"
			:auto="props.auto"
		>
			<template #top>
				<slot name="top"></slot>
			</template>
			<template #bottom>
				<slot name="bottom"></slot>
			</template>
			<slot :data="list.data"></slot>
		</z-paging>
	</div>
</template>

<script setup>
let props = defineProps({
	query: {
		default: () => {
			return () => {};
		}
	},
	auto: {
		type: Boolean,
		default: true
	},
	pageSize: {
		type: Number,
		default: 10
	},
	isPull: {
		type: Boolean,
		default: true
	}
});

let emits = defineEmits(['load']);

let $paging = Vue.ref(null);

let list = Vue.reactive({
	data: [],
	async up(page, limit) {
		if (page == 1) {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
		}

		const params = {
			page,
			limit
		};

		let res = await props.query(params);

		if (page == 1) {
			uni.hideLoading();
		}

		$paging.value.complete(res && Array.isArray(res.data) ? res.data : false);
	}
});

Vue.onMounted(() => {
	emits('load');
	// $paging.value.reload();
});

defineExpose({
	reload() {
		$paging.value.reload();
	}
});
</script>
